﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="/netctoss/"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>NetCTOSS</title>
        <link type="text/css" rel="stylesheet" media="all" href="styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="styles/global_color.css" />
        <script language="javascript" type="text/javascript">
            //排序按钮的点击事件
            // function sort(btnObj) {
            //     if (btnObj.className == "sort_desc")
            //         btnObj.className = "sort_asc";
            //     else
            //         btnObj.className = "sort_desc";
            // }
            // //启用
            // function startFee() {
            //     var r = window.confirm("确定要启用此资费吗？资费启用后将不能修改和删除。");
            //     document.getElementById("operate_result_info").style.display = "block";
            // }
            // //删除
            // function deleteFee() {
            //     var r = window.confirm("确定要删除此资费吗？");
            //     document.getElementById("operate_result_info").style.display = "block";
            // }
        </script>
        <script type="text/javascript" src="js/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#headerAndNavi").load("common/header.html")
            })
        </script>
    </head>
    <body>
        <!--Logo区域开始-->
        <div id="headerAndNavi">

        </div>
        <!--Logo区域结束-->

        <!--主要区域开始-->
        <div id="main">
            <form action="" method="">
                <!--排序-->
                <div class="search_add">
                    <div>
                        <input type="button" value="月租" class="sort_asc" @click="" />
                        <input type="button" value="基费" class="sort_asc" @click="descTwo" />
                        <input type="button" value="时长" class="sort_asc" @click="descThree" />
                    </div>
                    <input type="button" value="增加" class="btn_add" @click="insert" />
                </div> 
                <!--启用操作的操作提示-->
                <div id="operate_result_info" class="operate_success">
                    <img src="images/close.png" onclick="this.parentNode.style.display='none';" />
                    删除成功！
                </div>    
                <!--数据区域：用表格展示数据-->     
                <div id="data">            
                    <table id="datalist">
                        <tr>
                            <th>资费ID</th>
                            <th class="width100">资费名称</th>
                            <th>基本时长</th>
                            <th>基本费用</th>
                            <th>单位费用</th>
                            <th>创建时间</th>
                            <th>开通时间</th>
                            <th class="width50">状态</th>
                            <th class="width200"></th>
                        </tr>                      
                        <tr v-for="fee in result.list">
                            <td>{{fee.costId}}</td>
                            <td><a href="javascirpt:;" @click="detail(fee)">{{fee.costName}}</a></td>
                            <td>{{fee.costBaseDuration}} 小时</td>
                            <td>{{fee.costBaseCost}}</td>
                            <td>{{fee.costUnitCost}} 元/小时</td>
                            <td>{{fee.costCreattime}}</td>
                            <td>{{fee.costStarttime}}</td>
                            <td v-if="fee.costStatus==0">开通</td>
                            <td v-else-if="fee.costStatus==1">暂停</td>
                            <td v-else-if="fee.costStatus==2">删除</td>
                            <td v-else-if="fee.costStatus==null"></td>
                            <td>                                
                                <input type="button" value="启用" class="btn_start" />
                                <input type="button" value="修改" class="btn_modify"   @click="toUpdate(fee)"/>
                                <input type="button" value="删除" class="btn_delete"  @click="deleteOne(fee)"/>
                            </td>
                        </tr>

                    </table>
                    <p>业务说明：<br />
                    1、创建资费时，状态为暂停，记载创建时间；<br />
                    2、暂停状态下，可修改，可删除；<br />
                    3、开通后，记载开通时间，且开通后不能修改、不能再停用、也不能删除；<br />
                    4、业务账号修改资费时，在下月底统一触发，修改其关联的资费ID（此触发动作由程序处理）
                    </p>
                </div>
                <!--分页-->
                <div id="pages">
                    <a href="javascript:;"   @click="selectPage(1,result.pageSize)">首页</a>
                    <a href="javascript:;"v-if="result.hasPreviousPage" @click="selectPage(result.prePage,result.pageSize)">上一页</a>
                    <a href="javascript:;"v-if="!result.hasPreviousPage" @click="selectPage(result.pageNum,result.pageSize)">上一页</a>

                    <a href="javascript:;" :class="result.pageNum ==pageNum ? 'current_page' : ''"
                       v-for="pageNum in result.navigatepageNums"
                       @click="selectPage(pageNum,result.pageSize)" >{{pageNum}}</a>

                    <a href="javascript:;"v-if="result.hasNextPage" @click="selectPage(result.nextPage,result.pageSize)">下一页</a>
                    <a href="javascript:;"v-if="!result.hasNextPage" @click="selectPage(result.pageNum,result.pageSize)">下一页</a>

                    <a href="javascript:;" @click="selectPage(result.pages,result.pageSize)">末页</a>
                </div>
            </form>
        </div>
    </body>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/axios.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/fee/index.js"></script>
</html>
